/* eslint no-unused-expressions: 0 */
import React, { Component } from 'react';
import { Dialog, Input, Select, Grid, TimePicker } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import DialogDecorator from './DialogDecorator';
const moment = require('moment');

const { Col, Row } = Grid;

class ScheduleDialog extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: props.visible,
      value: {
        ...props.value,
        startTime: props.value.startTime ? moment(props.value.startTime) : null,
        endTime: props.value.endTime ? moment(props.value.endTime) : null,
      },
    };
  }

  onFormChange = (value) => {
    this.setState({
      value,
    });
  };

  onOkHandler = () => {
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        console.log('errors', errors);
        return;
      }
      this.props.onOk && this.props.onOk(this.state.value);
    });
  };

  render() {
    return (
      <Dialog
        title="编辑数据"
        onClose={this.props.onClose}
        onCancel={this.props.onCancel}
        afterClose={this.props.afterClose}
        onOk={this.onOkHandler}
        visible={this.state.visible}
        style={{ width: 400 }}
      >
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.onFormChange}
          ref="form"
        >
          <div style={{ padding: '0 10px' }}>
            <Row style={styles.row}>
              <Col span={6}>
                <span style={styles.label}>班组名称</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  required
                  name="teamName"
                  message="班组名称必选"
                >
                  <Select style={{ width: '100%' }}>
                    <Select.Option value="A组">A组</Select.Option>
                    <Select.Option value="B组">B组</Select.Option>
                    <Select.Option value="C组">C组</Select.Option>
                    <Select.Option value="D组">D组</Select.Option>
                  </Select>
                </IceFormBinder>
                <IceFormError name="teamName" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={6}>
                <span style={styles.label}>倒班类型</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  required
                  name="scheduleType"
                  message="倒班类型必选"
                >
                  <Select style={{ width: '100%' }}>
                    <Select.Option value="白班">白班</Select.Option>
                    <Select.Option value="夜班">夜班</Select.Option>
                  </Select>
                </IceFormBinder>
                <IceFormError name="scheduleType" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={6}>
                <span style={styles.label}>开始时间</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  required
                  name="startTime"
                  message="开始时间必填"
                >
                  {/*<Input*/}
                    {/*placeholder='XX:XX'*/}
                    {/*style={styles.formField}*/}
                  {/*/>*/}
                  <TimePicker
                    format='H:mm'
                    disabledSeconds={() => {
                      return true;
                    }}
                    style={{ width: '100%' }}
                    placeholder='开始时间'
                  />
                </IceFormBinder>
                <IceFormError name="startTime" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={6}>
                <span style={styles.label}>结束时间</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  required
                  name="endTime"
                  message="结束时间必填"
                >
                  {/*<Input*/}
                    {/*placeholder='XX:XX'*/}
                    {/*style={styles.formField}*/}
                  {/*/>*/}
                  <TimePicker
                    format='H:mm'
                    disabledSeconds={() => {
                      return true;
                    }}
                    style={{ width: '100%' }}
                    placeholder='结束时间'
                  />
                </IceFormBinder>
                <IceFormError name="endTime" />
              </Col>
            </Row>
          </div>
        </IceFormBinderWrapper>
      </Dialog>
    );
  }
}

const styles = {
  row: {
    marginTop: '10px',
  },
  label: {
    lineHeight: '30px',
  },
  formField: {
    width: '100%',
  },
};

export default DialogDecorator(ScheduleDialog);
